<template>
	<!--  <button @click="handleClick">点我</button>-->

	<view class="xuexiBox">
		<tabNavHeader title="学习天地"></tabNavHeader>
		<view class="uv-empty" v-if="consultationList.length === 0">
			<uv-empty mode="list" icon="../../static/images/empty.png"></uv-empty>
		</view>
		<view v-else>
			<view class="consultation" v-for="item in consultationList">
				<view :class="{ consultationList, consultationListOne: index == 0 }" v-for="(list, index) in item.listData"
					:key="index" @tap="goRouterView(list.goRouter)">
					<view class="listLeft">
						<image :src="list.image" mode="aspectFill" loading="lazy"></image>
					</view>
					<view class="listRight">
						<h2>{{ list.title }}</h2>
						<p>
							<span class="author">{{ list.author }}</span>
							<span class="time">{{ list.newsDate }}</span>
						</p>
					</view>
				</view>
			</view>
		</view>

	</view>
	<!-- 自定义 tabBar -->
	<custom-tabbar :currentIndex="3" />
</template>

<script setup>
	import CustomTabbar from '@/components/customTabbar/custom-tabbar.vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'
	import HeaderNavTabarVue from '@/components/HeaderNavTabar/HeaderNavTabar.vue'
	const currentIndex = ref(3)
	onLoad(() => {
		uni.hideTabBar()
	})
	// 首页县区咨询数据
	let consultationList = ref([{
		name: '区县资讯',
		listData: [{
				image: '/static/image/home/226.webp',
				title: '河南金圣龙文化传媒产业学院第九届线场课堂正式开课',
				author: '河南金圣龙文化传播股份有限公司',
				newsDate: ' 2025年02月18日',
				goRouter: `/pages/Inquiries/index/index?inquiriesId=${0}`,
			},
			{
				image: '/static/image/home/640.webp',
				title: '企业文化分享《日航的奇迹II》',
				author: '河南金圣龙文化传播股份有限公司',
				newsDate: '2025年02月18日',
				goRouter: `/pages/Inquiries/index/index?inquiriesId=${1}`,
			},
			{
				image: '/static/image/home/841.webp',
				title: '2.14爱在情人节，南阳世界月季大观园邀您夜游西园，共赴浪漫旅程',
				author: '河南金圣龙文化传播股份有限公司',
				newsDate: '2025年02月14日',
				goRouter: `/pages/Inquiries/index/index?inquiriesId=${2}`,
			},

		],
	}, ])

	// 跳转对应功能区
	const goRouterView = (router) => {
		uni.navigateTo({
			url: router
		})
	}

	const handleClick = () => {
		uni.navigateTo({
			url: '/pages/attendance/attendancePage',
		})
	}
</script>

<style lang="scss" scoped>
	@import '/static/style/index.scss';

	.xuexiBox {
		padding: 0 24rpx;
		margin-bottom: 80rpx;
		width: 1000%;
		height: 100%;
	}

	.consultation {
		width: 702rpx;
		height: 734rpx;
		border-radius: $border-radius-base;
		box-sizing: border-box;

		h2 {
			font-size: $font-size-lg;
		}

		.consultationList {
			@include flex(center, space-between);
			border-top: 1px solid $dividing-line-color;
			padding: 24rpx 0;

			.listLeft {
				margin-right: 30rpx;

				image {
					width: 240rpx;
					height: 164rpx;
				}
			}

			.listRight {
				@include flex($justify: space-between, $flex-column: column);
				//height: 164rpx;
				padding: 6rpx 0;
				box-sizing: border-box;

				h2 {
					font-weight: $font-weight;
					font-size: $font-size-lg-base;
					@include text-overflow(2);
					margin-bottom: 20rpx;
				}

				p {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.author {
					width: 55%;
					overflow: hidden;
					/* 隐藏超出部分 */
					white-space: nowrap;
					/* 禁止换行 */
					text-overflow: ellipsis;
					/* 使用省略号表示超出部分 */
					font-size: $font-size-sm;
					color: #04b8d1;
					margin-right: 24rpx;
				}

				.time {
					font-size: $font-size-sm;
					color: $text-color-3-auxiliary;
				}
			}
		}

		.consultationListOne {
			border: none;
		}
	}
</style>